/* eslint-disable no-undef */ /* eslint-disable brace-style */
<template>
	<div class="basic-container">
		<div>
			<el-form
				ref="ruleForm0"
				:model="queryData0"
				:rules="rules"
				:inline="true"
			>
				<el-form-item
					v-if="hasPermission('90000004')"
					:label="`${$t('friendInvitation.activity_switch')}:`"
					style="margin-left:-5px"
					prop="status"
				>
					<el-switch
						:value="queryData0.status === 1"
						:active-text="`${$t('common.open')}`"
						:inactive-text="`${$t('common.close')}`"
						:disabled="!queryData0.activityId"
						@change="getSwitchControlApi"
					></el-switch>
				</el-form-item>
				<el-form-item v-if="hasPermission('90000008')">
					<el-link
						type="primary"
						:disabled="!queryData0.activityId"
						@click="operateList"
					>
						{{ $t('friendInvitation.exclusion_list') }}
					</el-link>
				</el-form-item>
			</el-form>
		</div>
		<div class="basic-params box-container">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane class="tab-item" name="first">
					<div slot="label">
						{{ $t('operation.activity_list.config') }}
						<p ref="first" class="box b1"></p>
					</div>
					<template>
						<el-form
							ref="ruleForm"
							:model="queryData"
							:rules="rules"
							:inline="true"
						>
							<el-form-item
								v-if="languages.includes('zh_CN')"
								:label="
									`${$t('operation.activity_list.subject') +
										'-' +
										$t('common.zh')}`
								"
								prop="nameZh"
							>
								<el-input
									v-model="queryData.nameZh"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="languages.includes('en_US')"
								:label="
									`${$t('operation.activity_list.subject') +
										'-' +
										$t('common.en')}`
								"
								prop="nameEn"
							>
								<el-input
									v-model="queryData.nameEn"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="languages.includes('th_TH')"
								:label="
									`${$t('operation.activity_list.subject') +
										'-' +
										$t('common.th')}`
								"
								prop="nameTh"
							>
								<el-input
									v-model="queryData.nameTh"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="languages.includes('vi_VN')"
								:label="
									`${$t('operation.activity_list.subject') +
										'-' +
										$t('common.vn')}`
								"
								prop="nameVi"
							>
								<el-input
									v-model="queryData.nameVi"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<br />
							<el-form-item
								v-if="languages.includes('zh_CN')"
								:label="
									$t(
										'operation.activity_list.main_title_chinese'
									) + ':'
								"
								prop="titleZh"
							>
								<el-input
									v-model="queryData.titleZh"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="languages.includes('en_US')"
								:label="
									$t(
										'operation.activity_list.main_title_english'
									) + ':'
								"
								prop="titleEn"
							>
								<el-input
									v-model="queryData.titleEn"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="languages.includes('th_TH')"
								:label="
									$t(
										'operation.activity_list.main_title_thai'
									) + ':'
								"
								prop="titleTh"
							>
								<el-input
									v-model="queryData.titleTh"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="languages.includes('vi_VN')"
								:label="
									$t(
										'operation.activity_list.main_title_vietnamese'
									) + ':'
								"
								prop="titleVi"
							>
								<el-input
									v-model="queryData.titleVi"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 180px"
									:disabled="!editVisible"
									maxlength="500"
								></el-input>
							</el-form-item>
							<br />
							<el-form-item
								:label="
									`${$t('operation.activity_list.object')}:`
								"
								prop="inTypeUser"
							>
								<el-select
									v-model="queryData.inTypeUser"
									size="mini"
									:placeholder="$t('common.please_choose')"
									clearable
									:disabled="!editVisible"
									collapse-tags
									style="width: 180px"
								>
									<el-option
										v-for="item in activityObject"
										:key="item.id"
										:label="item.label"
										:value="+item.id"
									></el-option>
								</el-select>
							</el-form-item>
							<br />
							<el-form-item
								:label="
									`${$t(
										'operation.activity_list.show_device'
									)}:`
								"
								prop="deviceType"
							>
								<div class="check-box-style">
									<el-checkbox
										v-model="checkAll"
										:indeterminate="isIndeterminate"
										:disabled="!editVisible"
										@change="handleCheckAllChange"
									>
										{{
											$t(
												'operation.activity_list.all_select'
											)
										}}
									</el-checkbox>
									<div style="margin:0 15px ;"></div>
									<el-checkbox-group
										v-model="queryData.deviceType"
										:disabled="!editVisible"
										@change="handleCheckedCitiesChange"
									>
										<el-checkbox
											v-for="item in loginDeviceType"
											:key="item.code"
											:label="item.code"
										>
											{{ item.description }}
										</el-checkbox>
									</el-checkbox-group>
								</div>
							</el-form-item>
							<br />
							<el-form-item
								:label="
									`${$t(
										'operation.activity_list.route_address'
									)}:`
								"
								prop="pageRouteAddr"
							>
								<el-input
									v-model="queryData.pageRouteAddr"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 600px"
									:maxlength="500"
									:disabled="!editVisible"
								></el-input>
							</el-form-item>
							<br />
							<el-form-item
								:label="
									`${$t('operation.activity_list.period')}:`
								"
								prop="cycle"
							>
								<template>
									<el-radio
										v-model="queryData.cycle"
										:disabled="!editVisible"
										:label="1"
									>
										{{
											$t(
												'operation.activity_list.detail_time'
											)
										}}
									</el-radio>
									<el-radio
										v-model="queryData.cycle"
										:disabled="!editVisible"
										:label="2"
									>
										{{ $t('operation.permanent') }}
									</el-radio>
								</template>
							</el-form-item>
							<el-form-item>
								<div style="color:#606266">
									<!-- <span>
											{{ `${$t('operation.activity_list.default')}:` }}
										</span>
										{{ $t('operation.activity_list.explain') }} -->
									({{ $t('friendInvitation.no_close_time') }})
								</div>
							</el-form-item>
							<br />
							<!-- <el-form-item
								v-if="queryData.cycle === 2"
								:label="`${$t('operation.activity_list.show_time')}:`"
								size="mini"
								prop="showTime1"
							>
								<el-date-picker
									v-model="queryData.showTime1"
									:disabled="!editVisible"
									type="datetime"
									:clearable="true"
									:picker-options="pickerOption"
									style="width: 360px"
									:placeholder="$t('operation.activity_list.start_time')"
									value-format="timestamp"
									@blur="check(queryData.showTime1)"
								></el-date-picker>
							</el-form-item> -->
							<el-form-item
								v-if="queryData.cycle === 2"
								:label="
									`${$t('operation.activity_list.time')}:`
								"
								size="mini"
								prop="activeTime1"
							>
								<el-date-picker
									v-model="queryData.activeTime1"
									:disabled="!editVisible"
									type="datetime"
									:clearable="true"
									:picker-options="pickerOptions"
									style="width: 360px"
									:placeholder="
										$t('operation.activity_list.start_time')
									"
									value-format="timestamp"
									@blur="check(queryData.activeTime1)"
								></el-date-picker>
							</el-form-item>
							<el-form-item
								v-if="queryData.cycle === 1"
								:label="
									`${$t(
										'operation.activity_list.show_time'
									)}:`
								"
								prop="showTime"
							>
								<el-date-picker
									v-model="queryData.showTime"
									size="mini"
									:disabled="!editVisible"
									:picker-options="pickerOptions"
									format="yyyy-MM-dd HH:mm:ss"
									type="datetimerange"
									range-separator="-"
									:start-placeholder="$t('common.start_date')"
									:end-placeholder="$t('common.end_date')"
									align="right"
									clearable
									value-format="timestamp"
									style="width: 360px"
									:default-time="defaultTime"
									@blur="check(queryData.showTime)"
								></el-date-picker>
							</el-form-item>
							<el-form-item
								v-if="queryData.cycle === 1"
								:label="
									`${$t('operation.activity_list.time')}:`
								"
								prop="activeTime"
							>
								<el-date-picker
									v-model="queryData.activeTime"
									size="mini"
									:picker-options="pickerOptions"
									:disabled="!editVisible"
									format="yyyy-MM-dd HH:mm:ss"
									type="datetimerange"
									range-separator="-"
									:start-placeholder="$t('common.start_date')"
									:end-placeholder="$t('common.end_date')"
									align="right"
									clearable
									value-format="timestamp"
									style="width: 360px"
									:default-time="defaultTime"
									@blur="check(queryData.activeTime)"
								></el-date-picker>
							</el-form-item>
						</el-form>
					</template>
				</el-tab-pane>
				<el-tab-pane class="tab-item" name="second">
					<div slot="label">
						{{ $t('operation.activity_list.rule_config') }}
						<p ref="second" class="box b2"></p>
					</div>
					<template>
						<el-form
							ref="ruleForm1"
							:model="queryData1"
							:rules="rules"
							:inline="true"
						>
							<!-- <el-form-item
								:label="`${$t('operation.activity_list.venue')}:`"
								prop="venue"
							>
								<div class="check-box-style">
									<el-checkbox
										v-model="checkAllCg"
										:indeterminate="isIndeterminateCg"
										:disabled="!editVisible"
										@change="handleCheckAllChangeCg"
									>
										{{ $t('operation.activity_list.all_select') }}
									</el-checkbox>
									<div style="margin:0 15px ;"></div>
									<el-checkbox-group
										v-model="queryData1.venue"
										:disabled="!editVisible"
										@change="handleCheckedCitiesChangeCg"
									>
										<el-checkbox
											v-for="item in citiesCg"
											:key="item.venueCode"
											:label="item.venueCode"
										>
											{{ item.venueName }}
										</el-checkbox>
									</el-checkbox-group>
								</div>
							</el-form-item> -->
						</el-form>
						<template>
							<div class="tabs-card">
								<div class="tabs-card-tabHeader">
									<span
										:class="[
											'tab-item',
											{ active: activeId === 1 }
										]"
										@click="activeId = 1"
									>
										{{
											$t('friendInvitation.invite_tasks')
										}}
									</span>
									<!-- <span
										:class="['tab-item', { active: activeId === 2 }]"
										@click="activeId = 2"
									>
										存款任务
									</span>
									<span
										:class="['tab-item', { active: activeId === 3 }]"
										@click="activeId = 3"
									>
										投注任务
									</span> -->
								</div>
								<!-- tabs对应的相应的内容 -->
								<!-- 邀请任务 -->
								<InviteTask
									v-if="activeId === 1"
									ref="invite"
									:isEdit="Object.keys(rowData).length > 0"
									:editVisible="editVisible"
									:merchantInfoObj="merchantInfoObj"
									@invite="invite"
								></InviteTask>
								<!-- 存款任务 -->
								<!-- <AppropriationTask
									v-show="activeId === 2"
									ref="appropriation"
									:editVisible="editVisible"
									:queryData1="queryData1"
									@appropriation="appropriation"
								></AppropriationTask> -->
								<!-- BettingTask 投注任务 -->
								<!-- <BettingTask
									v-show="activeId === 3"
									ref="betting"
									:editVisible="editVisible"
									@betting="betting"
								></BettingTask> -->
							</div>
						</template>
					</template>
				</el-tab-pane>
				<el-tab-pane class="tab-item" name="third">
					<div slot="label">
						{{ $t('operation.activity_list.front_config') }}
						<p ref="third" class="box b3"></p>
					</div>
					<!-- FrontEndConfiguration -->
					<FrontEndConfiguration
						ref="FrontFiguration"
						:editVisible="editVisible"
						:merchantInfoObj="merchantInfoObj"
						@handleFrontVal="handleFrontVal"
					></FrontEndConfiguration>
				</el-tab-pane>
				<el-tab-pane class="tab-item" name="fourth">
					<div slot="label">
						{{ $t('operation.activity_list.content_config') }}
						<p ref="fourth" class="box b4"></p>
						<div
							v-if="
								!queryData0.status && hasPermission('90000006')
							"
							class="save-btn"
						>
							<!-- <el-button
								class="btn small btn-left"
								size="mini"
								@click="resetSave"
							>
								取消
							</el-button> -->
							<el-button
								type="primary"
								size="mini"
								@click.stop="handleSave"
							>
								{{ $t('common.save') }}
							</el-button>
						</div>
					</div>
					<div
						v-if="languages.includes('zh_CN')"
						style="display: flex;margin-bottom:20px"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_tip') }}-{{
								$t('operation.activity_list.chinese')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('zh_CN')"
						ref="editorOneZh"
						key="editorOneZh"
						v-model="queryData2.inviteTaskInfoZh"
						domName="editorOneZh"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('zh_CN') &&
								!queryData2.inviteTaskInfoZh &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<div
						v-if="languages.includes('en_US')"
						style="display: flex;margin-bottom:20px"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_tip') }}-{{
								$t('operation.activity_list.english')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('en_US')"
						ref="editorOneEn"
						key="editorOneEn"
						v-model="queryData2.inviteTaskInfoEn"
						domName="editorOneEn"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('en_US') &&
								!queryData2.inviteTaskInfoEn &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<div
						v-if="languages.includes('th_TH')"
						style="display: flex;margin-bottom:20px"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_tip') }}-{{
								$t('operation.activity_list.thai')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('th_TH')"
						ref="editorOneTh"
						key="editorOneTh"
						v-model="queryData2.inviteTaskInfoTh"
						domName="editorOneTh"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('th_TH') &&
								!queryData2.inviteTaskInfoTh &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<div
						v-if="languages.includes('vi_VN')"
						style="display: flex;margin-bottom:20px"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_tip') }}-{{
								$t('operation.activity_list.vietnamese')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('vi_VN')"
						ref="editorOneVi"
						key="editorOneVi"
						v-model="queryData2.inviteTaskInfoVi"
						domName="editorOneVi"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('vi_VN') &&
								!queryData2.inviteTaskInfoVi &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<div
						v-if="languages.includes('zh_CN')"
						style="display: flex;margin:25px 0"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_ditel') }}-{{
								$t('operation.activity_list.chinese')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('zh_CN')"
						ref="editorTwoZh"
						key="editorTwoZh"
						v-model="queryData2.inviteTaskRuleZh"
						domName="editorTwoZh"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('zh_CN') &&
								!queryData2.inviteTaskRuleZh &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<div
						v-if="languages.includes('en_US')"
						style="display: flex;margin:25px 0"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_ditel') }}-{{
								$t('operation.activity_list.english')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('en_US')"
						ref="editorTwoEn"
						key="editorTwoEn"
						v-model="queryData2.inviteTaskRuleEn"
						domName="editorTwoEn"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('en_US') &&
								!queryData2.inviteTaskRuleEn &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<div
						v-if="languages.includes('th_TH')"
						style="display: flex;margin:25px 0"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_ditel') }}-{{
								$t('operation.activity_list.thai')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('th_TH')"
						ref="editorTwoTh"
						key="editorTwoTh"
						v-model="queryData2.inviteTaskRuleTh"
						domName="editorTwoTh"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('th_TH') &&
								!queryData2.inviteTaskRuleTh &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<div
						v-if="languages.includes('vi_VN')"
						style="display: flex;margin:25px 0"
					>
						<span
							style="color:red;font-size:25px;line-height: 25px"
						>
							*
						</span>
						<span>
							{{ $t('friendInvitation.invite_tasks_ditel') }}-{{
								$t('operation.activity_list.vietnamese')
							}}
						</span>
					</div>
					<yk-editor
						v-if="languages.includes('vi_VN')"
						ref="editorTwoVi"
						key="editorTwoVi"
						v-model="queryData2.inviteTaskRuleVi"
						domName="editorTwoVi"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="
							languages.includes('vi_VN') &&
								!queryData2.inviteTaskRuleVi &&
								editVisible
						"
						style="color:red;font-size:16px"
					>
						<span>{{ $t('common.please_enter') }}...</span>
					</div>
					<!-- <div style="display: flex;margin-top:30px">
						<span style="color:red;font-size:25px;line-height: 25px">
							*
						</span>
						<span>APP存款任务说明</span>
					</div>
					<yk-editor
						ref="editorThree"
						v-model="queryData2.depositTaskInfo"
						domName="editorThree"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="!queryData2.depositTaskInfo && editVisible"
						style="color:red;font-size:16px"
					>
						<span>请输入...</span>
					</div>
					<div style="display: flex;margin-top:30px">
						<span style="color:red;font-size:25px;line-height: 25px">
							*
						</span>
						<span>APP存款任务规则详情</span>
					</div>
					<yk-editor
						ref="editorFour"
						v-model="queryData2.depositTaskRule"
						domName="editorFour"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="!queryData2.depositTaskRule && editVisible"
						style="color:red;font-size:16px"
					>
						<span>请输入...</span>
					</div>
					<div style="display: flex;margin-top:30px">
						<span style="color:red;font-size:25px;line-height: 25px">
							*
						</span>
						<span>APP投注任务说明</span>
					</div>
					<yk-editor
						ref="editorFive"
						v-model="queryData2.betTaskInfo"
						domName="editorFive"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="!queryData2.betTaskInfo && editVisible"
						style="color:red;font-size:16px"
					>
						<span>请输入...</span>
					</div>
					<div style="display: flex;margin-top:30px">
						<span style="color:red;font-size:25px;line-height: 25px">
							*
						</span>
						<span>APP投注任务规则详情</span>
					</div>
					<yk-editor
						ref="editorSix"
						v-model="queryData2.betTaskRule"
						domName="editorSix"
						:editVisible="editVisible"
						@change="getEditorOne"
					></yk-editor>
					<div
						v-if="!queryData2.betTaskRule && editVisible"
						style="color:red;font-size:16px"
					>
						<span>请输入...</span>
					</div> -->
				</el-tab-pane>
			</el-tabs>
			<!-- <div class="close" @click="close">x</div> -->
			<!-- 圆点 -->
			<!-- <div class="box-container">
				<div ref="first" class="box b1"></div>
				<div ref="second" class="box b2"></div>
				<div ref="third" class="box b3"></div>
				<div ref="fourth" class="box b4"></div>
			</div> -->
			<!-- <div v-if="!queryData0.status && hasPermission('90000006')">
				<el-button class="btn small btn-left" size="mini" @click="resetSave">
					取消
				</el-button>
				<el-button
					class="btn small"
					type="primary"
					size="mini"
					@click="handleSave"
				>
					{{ $t('common.save') }}
				</el-button>
			</div> -->
			<!-- <div>
				<el-button class="btn small btn-left" size="mini" @click="resetSave">
					取消
				</el-button>
				<el-button
					class="btn small"
					type="primary"
					size="mini"
					@click="handleSave"
				>
					保存
				</el-button>
			</div> -->
			<!-- <div v-else>
				<el-button @click="editVisible = true" type="primary" class="small ">
					我要编辑
				</el-button>
			</div> -->
		</div>
		<!--  -->
		<el-dialog
			key="inTypeUser"
			:title="listObject.title"
			:visible.sync="listObject.visible"
			:destroy-on-close="true"
			width="900px"
			@close="listObject.visible = false"
		>
			<header class="activity-object-type-list-header">
				<label class="activity-object-type-list-label">
					{{ $t('agent.total_agent_account') }}:
				</label>
				<el-input
					v-model="listObject.proxyName"
					class="activity-object-type-list-input"
					:placeholder="$t('common.please_enter')"
					clearable
				></el-input>
				<el-button
					type="success"
					:loading="listObject.loading"
					@click="handleClickAdd"
				>
					{{ $t('operation.activity_list.add1') }}
				</el-button>
				<span class="activity-object-type-list-description">
					{{ listObject.description }}
				</span>
			</header>
			<main>
				<el-table
					:data="listObject.tableData"
					style="width: 100%"
					max-height="500"
				>
					<el-table-column
						align="center"
						prop="userName"
						:label="$t('agent.total_agent_account')"
						min-width="180"
					></el-table-column>
					<el-table-column
						align="center"
						prop="operator"
						:label="$t('friendInvitation.modify_person')"
						min-width="120"
					></el-table-column>
					<el-table-column
						align="center"
						prop="updatedAt"
						:label="$t('friendInvitation.modify_time')"
						min-width="180"
					></el-table-column>
					<el-table-column
						:label="$t('common.actions')"
						min-width="70"
						align="center"
					>
						<template slot-scope="scope">
							<el-button
								type="danger"
								size="medium"
								class="noicon"
								@click="deleteList(scope.row)"
							>
								{{ $t('common.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					v-if="listObject.tableData.length > 0"
					:current-page.sync="listObject.pageNum"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size.sync="listObject.pageSize"
					:page-sizes="[10, 20, 50, 100, 200]"
					:total="listObject.total"
					@current-change="getMemberData"
					@size-change="getMemberData"
				></el-pagination>
			</main>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { shortcuts1 } from '@/utils/consts'
import { pickerOption } from './pickerOption'
import InviteTask from './comps/inviteTask'
// import BettingTask from './comps/BettingTask'
// import AppropriationTask from './comps/AppropriationTask'
import FrontEndConfiguration from './comps/FrontEndConfiguration'
import ykEditor from '@/components/ykeditor'
// const cityOptionsCg = [
// 	'PM体育',
// 	'PM真人',
// 	'PM电游',
// 	'PM棋牌',
// 	'PM电竞',
// 	'PM彩票',
// 	'PM捕鱼',
// 	'PM哈希'
// ]
// ty zr dy qp dj cp by
// const changGuan = {
// 	PM体育: 'ty',
// 	PM真人: 'zr',
// 	PM电游: 'dy',
// 	PM棋牌: 'qp',
// 	PM电竞: 'dj',
// 	PM彩票: 'cp',
// 	PM捕鱼: 'by',
// 	OB哈希: 'hash'
// }
// const changGuanId = [
// 	{ id: 'ty', name: 'PM体育' },
// 	{ id: 'zr', name: 'PM真人' },
// 	{ id: 'dy', name: 'PM电游' },
// 	{ id: 'qp', name: 'PM棋牌' },
// 	{ id: 'dj', name: 'PM电竞' },
// 	{ id: 'cp', name: 'PM彩票' },
// 	{ id: 'by', name: 'PM捕鱼' },
// 	{ id: 'hash', name: 'PM哈希' }
// ]

// const start = dayjs()
// 	.startOf('day')
// 	.valueOf()
// const end = dayjs()
// 	.endOf('day')
// 	.valueOf()
export default {
	name: 'BasicConfiguration',
	components: {
		// AppropriationTask,
		FrontEndConfiguration,
		ykEditor,
		InviteTask
		// BettingTask
	},
	mixins: [list],
	props: {
		showEdited: {
			type: Boolean,
			default: () => false
		},
		isFriend: {
			type: Boolean,
			default: () => false
		},
		merchantInfoObj: {
			type: Object,
			default: () => {}
		},
		rowData1: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			queryData0: {
				status: 0,
				activityId: 0
			},
			// 进入页面的数据存
			rowData: {},
			languages: [],
			loading: true,
			noShowBtn: true,
			// 默认我要编辑
			editVisible: true,
			//
			checkAll: false,
			isIndeterminate: false,

			citiesCg: [],
			isIndeterminateCg: false,
			//
			activeObj: [
				{ label: '全部会员', id: 1 },
				{ label: '名单内会员', id: 2 },
				{ label: '指定代理线会员', id: 3 }
			],
			activeYean: [{ label: '#读取活动标签列表', id: 1 }],
			ApplyObj: [
				{ label: '每场馆一次', id: 1 },
				{ label: '每账号一次', id: 2 },
				{ label: '每活动一次', id: 3 }
			],
			sheBeiObj: [{ label: '是', id: 1 }, { label: '否', id: 0 }],
			dividendObj: [
				{ label: '红利发放', id: 1 },
				{ label: '人工发放', id: 2 }
			],
			activeName: 'first',
			activeId: 1,
			// 基础配置 校验判断点
			isErr1: false,
			// 基础配置，编辑正确
			firstOk: false,
			// 基础配置，已经编辑但是不正确
			firstNoOk: false,

			// 规则配置 校验判断点
			appropriations: false,
			appropriationsTable: false,
			invites: false,
			inviteTable: false,
			bettingS: false,
			isErr2: false,
			// 规则子节点的
			isValidate1: false,
			isValidate2: false,
			isValidate3: false,
			isValidate4: false,
			isValidate5: false,
			isValidate6: false,
			// 规则配置，编辑正确
			secondOk: false,
			// 规则配置，已经编辑但是不正确
			secondNoOk: false,

			// 前端配置,默认0 后面更改会是true/false 校验判断点
			isErr3: 0,
			// 内容配置,默认0 后面更改会是true/false 校验判断点
			isErr4: 0,
			queryData: {
				nameZh: '',
				titleZh: '',
				nameEn: '',
				titleEn: '',
				nameTh: '',
				titleTh: '',
				nameVi: '',
				titleVi: '',
				pageRouteAddr: '',
				inTypeUser: 1,
				cycle: 1,
				deviceType: [],
				//
				showTime: [],
				activeTime: [],
				activeTime1: '',
				showTime1: ''
			},
			checkAllCg: false,
			queryData1: {
				// 场馆
				venue: []
			},
			queryData2: {
				inviteTaskInfoZh: '',
				inviteTaskInfoEn: '',
				inviteTaskInfoTh: '',
				inviteTaskInfoVi: '',
				inviteTaskRuleZh: '',
				inviteTaskRuleEn: '',
				inviteTaskRuleTh: '',
				inviteTaskRuleVi: ''
				// depositTaskInfo: '',
				// depositTaskRule: '',
				// betTaskInfo: '',
				// betTaskRule: ''
			},
			queryData3: {},
			queryData4: {},
			pickerOption: pickerOption,
			listObject: {
				title: this.$t('friendInvitation.exclusion_list'),
				visible: false,
				description: this.$t('friendInvitation.exclusion_description'),
				pageNum: 1,
				pageSize: 100,
				total: 0,
				data: {},
				proxyName: '',
				tableData: [],
				loading: false
			}
		}
	},
	computed: {
		pickerOptions() {
			const _this = this
			return {
				disabledDate(time) {
					const now = Date.now() - 24 * 60 * 60 * 1000
					return time.getTime() < now
				},
				onPick({ maxDate, minDate }) {
					if (!maxDate) {
						_this.minDate = minDate
					}
				},
				shortcuts: shortcuts1
			}
		},
		activityTypeStatus() {
			return this.globalDics.activityType || []
		},
		activityObject() {
			return [{ label: this.$t('operation.all_member'), id: 1 }]
		},
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		rules() {
			return {
				status: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				deviceType: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				nameZh: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				nameEn: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				nameTh: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				nameVi: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				titleZh: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				titleEn: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				titleTh: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				titleVi: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				pageRouteAddr: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				inTypeUser: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				cycle: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				showTime: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				showTime1: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				activeTime: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				activeTime1: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],

				applyType: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				bonusAudit: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				giveType: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				venue: [
					{
						required: true,
						message: this.$t('common.please_choose'),
						trigger: ['blur', 'change']
					}
				],
				// 好友邀请
				inviteRadio: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				],
				intervalTime: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: ['blur', 'change']
					}
				]
			}
		}
	},
	watch: {
		'queryData0.status': function(val) {
			if (val === 1) this.editVisible = false
			else this.editVisible = true
		},
		'queryData.cycle': function(val) {
			if (val) {
				if (val === 1) {
					this.queryData.showTime1 = ''
					this.queryData.activeTime1 = ''
				} else if (val === 2) {
					this.queryData.showTime = []
					this.queryData.activeTime = []
				}
			}
		},
		merchantInfoObj: {
			handler(newV, oldV) {
				this.languages = newV?.languages?.split(',') || []
				const arr = []
				for (let i = 0; i < this.languages.length; i++) {
					const item = this.languages[i]
					const toUpC = item.replace(item[0], item[0].toUpperCase())
					arr.push(toUpC?.split('_')[0])
				}
				for (let i = 0; i < arr?.length; i++) {
					const lang = arr[i]
					for (const key in this.queryData2) {
						if (key.includes(lang)) {
							this.queryData3[key] = ''
						}
					}
				}
				this.queryData2 = { ...this.queryData3 }
			},
			deep: true,
			immediate: true
		},
		rowData1: {
			handler(val) {
				// if (val && Object.keys(val).length <= 3) return
				this.rowData = { ...val }
				// if (
				// 	this.$refs.appropriation?.$refs.tableForm &&
				// 	this.rowData.activityConfigScRuleList?.length
				// ) {
				// 	this.$nextTick(() => {
				// 		setTimeout(() => {
				// 			this.$refs.appropriation.$refs.tableForm.model.scRuleList =
				// 				this.rowData.activityConfigScRuleList || []
				// 		})
				// 	})
				// }
			},
			immediate: true,
			deep: true
		},
		editVisible: {
			handler(val) {
				this.$nextTick(() => {
					this.firstValidate()
				})
			},
			deep: true,
			immediate: true
		},
		// 基础配置的圆点检测
		queryData: {
			handler(el) {
				Object.keys(el).forEach((item) => {
					this.firstValidate()
				})
			},
			deep: true,
			immediate: true
		},
		// 规则配置的圆点检测
		queryData1: {
			handler(el) {
				Object.keys(el).forEach((item) => {
					this.$nextTick(() => {
						this.validate1()
						this.secondValidate()
					})
				})
			},
			immediate: true,
			deep: true
		},
		// 内容配置
		queryData2: {
			handler(el, o) {
				const isERr = Object.keys(el).find((item) => {
					return !el[item]
				})
				this.$nextTick(() => {
					if (isERr && this.activeName === 'fourth') {
						this.isErr4 = true
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:red'
						)
					} else if (!isERr && this.activeName === 'fourth') {
						this.isErr4 = false
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:green'
						)
					}
				})
			},
			immediate: true,
			deep: true
		},
		// 圆点
		activeName: {
			handler(val) {
				const tabItemArr = ['first', 'second', 'third', 'fourth']
				this.$nextTick(() => {
					if (val === this.activeName) {
						// this.$refs[this.activeName]?.setAttribute(
						// 	'style',
						// 	'background:rgba(0, 0, 0, 0.247)'
						// )
						if (this.queryData0.status === 0) {
							this.$refs[this.activeName]?.setAttribute(
								'style',
								'background:rgba(0, 0, 0, 0.247)'
							)
						} else {
							this.$refs[this.activeName]?.setAttribute(
								'style',
								'background:green'
							)
						}
						setTimeout(() => {
							this.beForeEdit()
						}, 500)
					}
					tabItemArr.forEach((item) => {
						if (item !== val) {
							this.$refs[item]?.setAttribute(
								'style',
								'background:rgba(0, 0, 0, 0.247)'
							)
							if (this.firstOk && this.activeName !== 'first') {
								this.$refs['first']?.setAttribute(
									'style',
									'background:green'
								)
							}
							if (this.firstNoOk && this.activeName !== 'first') {
								this.$refs['first']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (this.secondOk && this.activeName !== 'second') {
								this.$refs['second']?.setAttribute(
									'style',
									'background:green'
								)
							}
							if (
								this.secondNoOk &&
								this.activeName !== 'second'
							) {
								this.$refs['second']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (this.isErr3 && this.activeName !== 'third') {
								this.$refs['third']?.setAttribute(
									'style',
									'background:green'
								)
							}
							if (
								!this.isErr3 &&
								this.isErr3 !== 0 &&
								this.activeName !== 'third'
							) {
								this.$refs['third']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (
								this.isErr4 &&
								this.isErr4 !== 0 &&
								this.activeName !== 'fourth'
							) {
								this.$refs['fourth']?.setAttribute(
									'style',
									'background:red'
								)
							}
							if (
								!this.isErr4 &&
								this.isErr4 !== 0 &&
								this.activeName !== 'fourth'
							) {
								this.$refs['fourth']?.setAttribute(
									'style',
									'background:green'
								)
							}
						}
					})
				})
			},
			immediate: true,
			deep: true
		}
	},
	created() {
		// 查询单条
		this.getActivityInviteConfigApi()
		this.getvenueList()
	},
	mounted() {},
	methods: {
		getvenueList() {
			const res = this.$api.memberVenue({
				merchantId: this.merchantInfoObj.id
			})
			this.citiesCg = res?.data || []
		},
		getSwitchControlApi(val) {
			if (val) {
				this.setOpenSwitch()
			} else {
				this.confirmCloseSwitch()
			}
		},
		confirmCloseSwitch() {
			this.$confirm(
				`<strong>${this.$t('friendInvitation.close_switch')}</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.setOpenSwitch()
				})
				.catch(() => {
					this.loading = false
				})
		},
		setOpenSwitch() {
			this.getActivityInviteConfigApi()
			this.$api
				.getSwitchControlApi({
					activityId: this.queryData0.activityId,
					status: this.queryData0.status === 1 ? 0 : 1,
					merchantId: this.merchantInfoObj.id
				})
				.then((res) => {
					if (res?.code === 200) {
						this.getActivityInviteConfigApi()
						this.$message({
							type: 'success',
							message: this.$t('common.action_success'),
							duration: 1500
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		getActivityInviteConfigApi() {
			this.$api
				.getActivityInviteConfigApi({
					merchantId: this.merchantInfoObj.id
				})
				.then((res) => {
					if (res?.code === 200) {
						this.rowData = {
							...res?.data
						}
						setTimeout(() => {
							this.queryData0.status = res.data?.status
							this.queryData0.activityId = res.data?.id || ''
						}, 500)
						if (Object.keys(this.rowData)?.length <= 3) return

						this.$nextTick(() => {
							this.one()
							this.two()
							this.three()
							this.four()
							this.checkObj()
						})
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		async checkObj() {
			await setTimeout(() => {
				this.checkEr()
			}, 1000)
			await setTimeout(() => {
				this.handleFrontValeDid(1)
			}, 1500)
			await setTimeout(() => {
				this.checkSi()
			}, 2000)
		},
		checkSi() {
			const isERr = Object.keys(this.queryData2).find((item) => {
				return !this.queryData2[item]
			})
			this.$nextTick(() => {
				if (isERr) {
					this.isErr4 = true
					this.$refs['fourth']?.setAttribute(
						'style',
						'background:red'
					)
				} else if (!isERr) {
					this.isErr4 = false
					this.$refs['fourth']?.setAttribute(
						'style',
						'background:green'
					)
				}
			})
		},
		// 编辑的规则这配置
		checkEr() {
			this.validate1()
			// this.betting()
			this.invite()
			// this.appropriation()
			this.secondValidate()
		},
		//
		// 规则配置校验
		betting() {
			this.$refs.betting?.$refs.ruleForm?.validate((valid) => {
				this.$nextTick(() => {
					this.bettingS = valid
					this.secondValidate()
				})
				// return valid
			})
		},
		invite() {
			this.$refs.invite?.$refs.ruleForm.validate((valid) => {
				this.$nextTick(() => {
					this.invites = valid
					this.secondValidate()
				})
				// return valid
			})
			this.$refs.invite?.$refs.tableForm?.validate((valid) => {
				this.$nextTick(() => {
					// this.isValidate3 = valid
					this.inviteTable = valid
					this.secondValidate()
				})
				// return valid
			})
		},
		appropriation() {
			this.$refs.appropriation?.$refs.ruleForm.validate((valid) => {
				this.$nextTick(() => {
					// this.isValidate2 = valid
					this.appropriations = valid
					this.secondValidate()
				})
				return valid
			})
			this.$refs.appropriation?.$refs.tableForm?.validate((valid) => {
				this.$nextTick(() => {
					this.appropriationsTable = valid
					this.secondValidate()
				})
				return valid
			})
		},

		secondValidate(activeName) {
			setTimeout(() => {
				this.isErr2 =
					this.invites && this.inviteTable && this.isValidate1
				if (!this.isErr2) {
					this.secondOk = false
					this.secondNoOk = true
					this.$nextTick(() => {
						this.$refs['second']?.setAttribute(
							'style',
							'background:red'
						)
					})
				} else if (this.isErr2) {
					this.secondOk = true
					this.secondNoOk = false
					this.$nextTick(() => {
						this.$refs['second']?.setAttribute(
							'style',
							'background:green'
						)
					})
				}
			}, 1500)
		},
		// 基础配置校验
		validate() {
			if (!this.$refs['ruleForm']) return
			this.$refs['ruleForm'].validate((valid) => {
				this.isErr1 = valid
			})
		},
		// 规则配置
		validate1() {
			if (!this.$refs['ruleForm1']) return
			this.$refs['ruleForm1'].validate((valid) => {
				this.isValidate1 = valid
				this.secondValidate()
				// return valid
			})
		},
		firstValidate() {
			setTimeout(() => {
				this.$nextTick(() => {
					if (!this.editVisible) return
					this.validate()
					if (!this.isErr1 && this.activeName === 'first') {
						this.firstOk = false
						this.firstNoOk = true
						this.$refs[this.activeName]?.setAttribute(
							'style',
							'background:red'
						)
					} else if (this.isErr1 && this.activeName === 'first') {
						this.firstOk = true
						this.firstNoOk = false
						this.$nextTick(() => {
							this.$refs[this.activeName]?.setAttribute(
								'style',
								'background:green'
							)
						})
					}
				})
			}, 500)
		},

		handleFrontValeDid(val) {
			if (val) {
				this.$refs.FrontFiguration?.$refs.ruleForm?.validate(
					(valid) => {
						if (valid) {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:green'
								)
							})
						} else {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:red'
								)
							})
						}
						this.isErr3 = valid
						return valid
					}
				)
			}
		},
		handleFrontVal(val) {
			if (val) {
				if (this.activeName !== 'third' && this.editVisible) return
				this.$refs.FrontFiguration?.$refs.ruleForm?.validate(
					(valid) => {
						if (valid) {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:green'
								)
							})
						} else {
							this.$nextTick(() => {
								this.$refs.third?.setAttribute(
									'style',
									'background:red'
								)
							})
						}
						this.isErr3 = valid
						return valid
					}
				)
			}
		},
		// 前端配置 // 前端配置的圆点检测
		FrontFiguration() {
			this.$refs.FrontFiguration?.$refs.ruleForm?.validate((valid) => {
				this.isErr3 = valid
				return valid
			})
		},
		// 内容配置编辑取值
		four() {
			this.$nextTick(() => {
				for (const key in this.queryData3) {
					this.queryData2[key] = this.rowData[key] || ''
				}
			})
			// this.queryData2.inviteTaskInfoZh = this.rowData?.inviteTaskInfoZh || ''
			// this.queryData2.inviteTaskInfoEn = this.rowData?.inviteTaskInfoEn || ''
			// this.queryData2.inviteTaskInfoTh = this.rowData?.inviteTaskInfoTh || ''
			// this.queryData2.inviteTaskInfoVi = this.rowData?.inviteTaskInfoVi || ''
			// this.queryData2.inviteTaskRuleZh = this.rowData?.inviteTaskRuleZh || ''
			// this.queryData2.inviteTaskRuleEn = this.rowData?.inviteTaskRuleEn || ''
			// this.queryData2.inviteTaskRuleTh = this.rowData?.inviteTaskRuleTh || ''
			// this.queryData2.inviteTaskRuleVi = this.rowData?.inviteTaskRuleVi || ''
			// this.queryData2.depositTaskInfo = this.rowData?.depositTaskInfo || ''
			// this.queryData2.depositTaskRule = this.rowData?.depositTaskRule || ''
			// this.queryData2.betTaskInfo = this.rowData?.betTaskInfo || ''
			// this.queryData2.betTaskRule = this.rowData?.betTaskRule || ''
		},
		// 前端配置编辑取值
		three() {
			// queryData 前端配置
			const queryData = this.$refs.FrontFiguration.queryData
			for (const key in queryData) {
				queryData[key] = this.rowData[key] || ''
			}
			// this.$refs.FrontFiguration.queryData = {
			// 	masterPictureZh: this.rowData.masterPictureZh,
			// 	masterPictureEn: this.rowData.masterPictureEn,
			// 	masterPictureTh: this.rowData.masterPictureTh,
			// 	masterPictureVi: this.rowData.masterPictureVi,
			// 	sharePictureZh: this.rowData.sharePictureZh,
			// 	sharePictureEn: this.rowData.sharePictureEn,
			// 	sharePictureTh: this.rowData.sharePictureTh,
			// 	sharePictureVi: this.rowData.sharePictureVi,
			// 	pcMasterPictureZh: this.rowData.pcMasterPictureZh,
			// 	pcMasterPictureEn: this.rowData.pcMasterPictureEn,
			// 	pcMasterPictureTh: this.rowData.pcMasterPictureTh,
			// 	pcMasterPictureVi: this.rowData.pcMasterPictureVi,
			// 	pcListPictureZh: this.rowData.pcListPictureZh,
			// 	pcListPictureEn: this.rowData.pcListPictureEn,
			// 	pcListPictureTh: this.rowData.pcListPictureTh,
			// 	pcListPictureVi: this.rowData.pcListPictureVi
			// }
		},
		// 规则配置编辑取值
		two() {
			// queryData 规则配置
			// const venue = []
			// changGuanId?.length > 0 &&
			// 	changGuanId.map((val) => {
			// 		if (this.rowData.venue?.split(',').includes(val.id)) {
			// 			venue.push(val.name)
			// 		}
			// 	})
			this.queryData1 = {
				venue: this.rowData.venue?.split(',') || [],
				name1: this.rowData.name1
			}
			this.$nextTick(() => {
				for (const key in this.queryData3) {
					this.queryData2[key] = this.rowData[key] || ''
				}
			})
			const inviteTaskRuleList = []
			this.rowData?.inviteTaskRuleList?.length > 0 &&
				this.rowData?.inviteTaskRuleList.map((item) => {
					inviteTaskRuleList.push({
						depositAmount: item.depositAmount,
						inviteNum: item.inviteNum,
						inviteRewardAmount: item.inviteRewardAmount,
						inviteesRewardAmount: item.inviteesRewardAmount,
						validMultiple: item.validMultiple
					})
				})
			const inviteDepositRuleList = []
			this.rowData?.inviteDepositRuleList?.length > 0 &&
				this.rowData?.inviteDepositRuleList.map((item) => {
					inviteDepositRuleList.push({
						depositRewardType: item.depositRewardType,
						depositVenueAmount: item.depositVenueAmount,
						validAmount: item.validAmount,
						validTopLimit: item.validTopLimit,
						validMultiple: item.validMultiple
					})
				})
			if (
				this.$refs.invite.$refs.tableForm &&
				this.rowData.inviteTaskRuleList?.length
			) {
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.invite.$refs.tableForm.model.inviteTaskRuleList =
							inviteTaskRuleList || []
						// this.rowData.inviteTaskRuleList || []
					})
				})
			}

			if (this.$refs.invite.queryData) {
				this.$nextTick(() => {
					this.$refs.invite.queryData = {
						...this.rowData
					}
				})
			}
			// if (
			// 	this.$refs.appropriation.$refs.tableForm &&
			// 	this.rowData.inviteDepositRuleList?.length
			// ) {
			// 	this.$nextTick(() => {
			// 		setTimeout(() => {
			// 			this.$refs.appropriation.$refs.tableForm.model.inviteDepositRuleList =
			// 				inviteDepositRuleList || []
			// 			// this.rowData.inviteDepositRuleList || []
			// 		})
			// 	})
			// }
			// if (this.$refs.appropriation.queryData) {
			// 	this.$nextTick(() => {
			// 		if (this.rowData.depositSwitch === 1) {
			// 			this.rowData.depositSwitch = true
			// 		} else if (this.rowData.depositSwitch === 0) {
			// 			this.rowData.depositSwitch = false
			// 		}
			// 		this.$refs.appropriation.queryData = {
			// 			...this.rowData
			// 		}
			// 	})
			// }
			// if (this.$refs.betting.queryData) {
			// 	this.$nextTick(() => {
			// 		if (this.rowData.betSwitch === 1) {
			// 			this.rowData.betSwitch = true
			// 		} else if (this.rowData.betSwitch === 0) {
			// 			this.rowData.betSwitch = false
			// 		}
			// 		this.$refs.betting.queryData = {
			// 			...this.rowData
			// 		}
			// 	})
			// }
			// this.isIndeterminateCg =
			// 	this.rowData?.venue.split(',').length !== this.citiesCg.length
			// this.checkAllCg =
			// 	this.rowData?.venue.split(',').length === this.citiesCg.length
		},
		// 基础配置编辑取值
		one() {
			// queryData 基础配置
			const deviceType = []
			this.loginDeviceType &&
				this.loginDeviceType?.length > 1 &&
				this.loginDeviceType.map((val) => {
					if (this.rowData.deviceType.split(',').includes(val.code)) {
						deviceType.push(val.code)
					}
				})
			this.$nextTick(() => {
				this.queryData = {
					inTypeUser: this.rowData.inTypeUser,
					activeTime1: +new Date(this.rowData.activityStartTime),
					showTime1: +new Date(this.rowData.showStartTime),
					showTime: this.rowData.showStartTime
						? [
								dayjs(this.rowData.showStartTime).valueOf(),
								dayjs(this.rowData.showEndTime).valueOf()
						  ]
						: [],
					activeTime: [
						this.rowData.activityStartTime &&
							dayjs(this.rowData.activityStartTime).valueOf(),
						this.rowData.activityEndTime &&
							dayjs(this.rowData.activityEndTime).valueOf()
					],
					nameZh: this.rowData.nameZh,
					titleZh: this.rowData.titleZh,
					nameEn: this.rowData.nameEn,
					titleEn: this.rowData.titleEn,
					nameTh: this.rowData.nameTh,
					titleTh: this.rowData.titleTh,
					nameVi: this.rowData.nameVi,
					titleVi: this.rowData.titleVi,
					pageRouteAddr: this.rowData.pageRouteAddr,
					cycle: this.rowData.cycle,
					deviceType: deviceType
				}
				this.isIndeterminate =
					deviceType.length !== this.loginDeviceType?.length
				this.checkAll =
					deviceType.length === this.loginDeviceType?.length
			})
		},
		check(time) {
			const now = dayjs()
				.startOf('day')
				.valueOf()
			if (time) {
				if (
					this.queryData.showTime1 &&
					this.queryData.showTime1 < now
				) {
					this.queryData.showTime1 = ''
					return this.$message.warning(
						this.$t('operation.activity_list.time_tip')
					)
				}
				if (
					this.queryData.showTime[0] &&
					this.queryData.showTime[0] < now
				) {
					this.queryData.showTime = []
					return this.$message.warning(
						this.$t('operation.activity_list.time_tip')
					)
				}
				if (
					this.queryData.showTime[0] &&
					this.queryData.showTime[0] > this.queryData.activeTime[0] &&
					this.queryData.activeTime[0]
				) {
					this.queryData.activeTime = []
					return this.$message.warning(
						this.$t('operation.activity_list.edit_time')
					)
				}
				if (
					this.queryData.showTime[1] &&
					this.queryData.showTime[1] < this.queryData.activeTime[1]
				) {
					this.queryData.activeTime = []
					return this.$message.warning(
						this.$t('operation.activity_list.edit_time')
					)
				}
				if (
					this.queryData.activeTime1 &&
					this.queryData.activeTime1 < this.queryData.showTime1 &&
					this.queryData.showTime1
				) {
					this.queryData.activeTime1 = ''
					return this.$message.warning(
						this.$t('operation.activity_list.edit_time')
					)
				}
			}
		},
		beForeEdit() {
			if (this.activeName === 'first') {
				this.firstValidate()
			} else if (this.activeName === 'second' && this.editVisible) {
				this.$nextTick(() => {
					this.validate1()
					this.invite()
					// this.betting()
					this.secondValidate()
					// this.appropriation()
				})
			} else if (this.activeName === 'third' && this.editVisible) {
				this.handleFrontVal(true)
			} else if (this.activeName === 'fourth' && this.editVisible) {
				this.$nextTick(() => {
					for (const key in this.queryData2) {
						if (!this.queryData2[key]) {
							this.isErr4 = true
							this.$refs[this.activeName]?.setAttribute(
								'style',
								'background:red'
							)
							return
						} else {
							this.isErr4 = false
							this.$refs[this.activeName]?.setAttribute(
								'style',
								'background:green'
							)
						}
					}
				})
			}
		},
		// 	取消
		resetSave() {
			this.editVisible = false
			// return this.$message.warning('已取消!')
		},
		handleSave() {
			let paramsDatas = {}
			const deviceType = []
			this.loginDeviceType &&
				this.loginDeviceType.length > 1 &&
				this.loginDeviceType.map((val) => {
					if (this.queryData.deviceType.includes(val.code)) {
						// return val.code
						val !== '' && deviceType.push(val.code)
					}
				})
			// const venue =
			// 	this.queryData1.venue &&
			// 	this.queryData1.venue?.length > 0 &&
			// 	this.queryData1.venue.map((val) => {
			// 		return changGuan[val]
			// 	})

			if (
				this.firstNoOk ||
				!this.isErr2 ||
				(!this.isErr3 && (this.isErr3 !== 0 || this.isErr3 !== '0')) ||
				(this.isErr4 &&
					(this.isErr4 !== 0 ||
						this.isErr4 !== '0' ||
						this.queryData2.inviteTaskInfoZh === '' ||
						this.queryData2.inviteTaskInfoEn === '' ||
						this.queryData2.inviteTaskInfoTh === '' ||
						this.queryData2.inviteTaskInfoVi === ''))
			) {
				return this.$message({
					message: this.$t('operation.activity_list.check'),
					type: 'warning'
				})
			}
			const inviteTaskRuleList = []
			const inviteTask = this.$refs.invite.$refs.tableForm.model
				?.inviteTaskRuleList
			this.$refs.invite.$refs.tableForm.model?.inviteTaskRuleList.map(
				(obj, index) => {
					for (const key in obj) {
						if (
							!inviteTask[index][key] ||
							inviteTask[index][key] === undefined
						) {
							obj[key] = inviteTask[0][key]
						}
						if (
							!obj['inviteesRewardAmount'] ||
							obj['inviteesRewardAmount'] === undefined
						) {
							obj['inviteesRewardAmount'] =
								inviteTask[0]['inviteesRewardAmount']
						}
						if (!obj['validMultiple'] || obj['validMultiple']) {
							obj['validMultiple'] =
								inviteTask[0]['validMultiple']
						}
					}
					inviteTaskRuleList.push(obj)
				}
			)
			const [start, end] = this.queryData.activeTime || []
			const [start1, end1] = this.queryData.showTime || []
			paramsDatas = {
				// ...this.$refs.invite.queryData,
				// ...this.$refs.appropriation.queryData,
				// ...this.$refs.betting.queryData,
				...this.queryData,
				...this.queryData1,
				merchantId: this.merchantInfoObj.id,
				inviteRewardCountType: this.$refs.invite.queryData
					.inviteRewardCountType,
				// depositRewardType: this.$refs.appropriation.queryData.depositRewardType,
				inviteRewardType: this.$refs.invite.queryData.inviteRewardType,
				inviteTaskRuleList: inviteTaskRuleList,
				// inviteDepositRuleList: this.$refs.appropriation.$refs.tableForm.model
				// 	?.inviteDepositRuleList,
				...this.$refs.FrontFiguration.queryData,
				...this.queryData2,
				venue: this.queryData1.venue && this.queryData1.venue.join(','),
				deviceType:
					(deviceType?.length > 0 && deviceType.join(',')) || [],
				showStartTime:
					this.queryData.cycle === 1
						? dayjs(start1).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				showEndTime:
					this.queryData.cycle === 1
						? dayjs(end1).format('YYYY-MM-DD HH:mm:ss')
						: undefined,
				activityStartTime:
					this.queryData.cycle === 1
						? dayjs(start).format('YYYY-MM-DD HH:mm:ss') ||
						  undefined
						: dayjs(this.queryData.activeTime1).format(
								'YYYY-MM-DD HH:mm:ss'
						  ) || undefined,
				activityEndTime:
					this.queryData.cycle === 1
						? dayjs(end).format('YYYY-MM-DD HH:mm:ss')
						: '2049-12-31 23:59:59',
				operator: localStorage.getItem('username') || ''
			}
			paramsDatas.inviteTitleZh =
				this.$refs.invite.queryData.inviteTitleZh || ''
			paramsDatas.inviteTitleEn =
				this.$refs.invite.queryData.inviteTitleEn || ''
			paramsDatas.inviteTitleTh =
				this.$refs.invite.queryData.inviteTitleTh || ''
			paramsDatas.inviteTitleVi =
				this.$refs.invite.queryData.inviteTitleVi || ''
			paramsDatas.inviteRewardType =
				this.$refs.invite.queryData.inviteRewardType || undefined
			paramsDatas.inviteDepositCountDay =
				this.$refs.invite.queryData.inviteDepositCountDay || ''
			paramsDatas.inviteRewardReceiveType =
				this.$refs.invite.queryData.inviteRewardReceiveType || undefined
			paramsDatas.inviteRewardSendType =
				this.$refs.invite.queryData.inviteRewardSendType || undefined
			paramsDatas.inviteRewardSendPosition =
				this.$refs.invite.queryData.inviteRewardSendPosition ||
				undefined
			paramsDatas.inviteRewardAuditFlag =
				this.$refs.invite.queryData.inviteRewardAuditFlag || 0
			paramsDatas.inviteRewardAmountMax =
				this.$refs.invite.queryData.inviteRewardAmountMax || ''
			paramsDatas.inviteRewardCountType =
				this.$refs.invite.queryData.inviteRewardCountType || undefined
			paramsDatas.inviteDepositCountType =
				this.$refs.invite.queryData.inviteDepositCountType || undefined
			paramsDatas.inviteRewardInviteesFlag =
				this.$refs.invite.queryData.inviteRewardInviteesFlag || 0
			// appropriation
			// paramsDatas.depositTitle =
			// 	this.$refs.appropriation.queryData.depositTitle || ''
			// paramsDatas.TaskForm = this.$refs.appropriation.queryData.TaskForm || ''
			// paramsDatas.RebateRatio =
			// 	this.$refs.appropriation.queryData.RebateRatio || ''
			// paramsDatas.depositRewardType =
			// 	this.$refs.appropriation.queryData.depositRewardType || 1
			// paramsDatas.depositValidity =
			// 	this.$refs.appropriation.queryData.depositValidity || ''
			// paramsDatas.depositIpRule =
			// 	this.$refs.appropriation.queryData.depositIpRule || 0
			// paramsDatas.depositDeviceRule =
			// 	this.$refs.appropriation.queryData.depositDeviceRule || 0
			// paramsDatas.depositInviteesAmount =
			// 	this.$refs.appropriation.queryData.depositInviteesAmount || ''
			// paramsDatas.AwardConditions =
			// 	this.$refs.appropriation.queryData.AwardConditions || ''
			// paramsDatas.BonusMethod =
			// 	this.$refs.appropriation.queryData.BonusMethod || ''
			// paramsDatas.depositMethod =
			// 	this.$refs.appropriation.queryData.depositMethod || ''
			// paramsDatas.depositSwitch = this.$refs.appropriation.queryData
			// 	.depositSwitch
			// 	? 1
			// 	: 0
			//
			if (paramsDatas.betSwitch) {
				paramsDatas.betSwitch = 1
			} else if (!paramsDatas.betSwitch) {
				paramsDatas.betSwitch = 0
			}
			delete paramsDatas.entranceEnable
			delete paramsDatas.activeTime
			delete paramsDatas.showTime
			delete paramsDatas.activeTime1
			delete paramsDatas.showTime1
			paramsDatas.id = this.rowData.id
			this.loading = true

			this.$api
				.getActivityInviteConfigSaveConfigApi(paramsDatas)
				.then((res) => {
					if (res?.code === 200) {
						this.$message.success(this.$t('common.action_success'))
						this.getActivityInviteConfigApi()
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
			// this.$emit('close', false)
		},

		getEditorOne(val) {
			this.$forceUpdate()
		},
		handleCheckAllChange(val) {
			this.queryData.deviceType = val
				? this.loginDeviceType.map((val) => val.code)
				: []
			this.isIndeterminate = false
		},
		handleCheckedCitiesChange(value) {
			const checkValue = []
			value &&
				value.map((v) => {
					return v !== undefined && checkValue.push(v)
				})
			const checkedCount = checkValue?.length
			this.checkAll = checkedCount === this.loginDeviceType?.length
			this.isIndeterminate =
				checkedCount > 0 && checkedCount < this.loginDeviceType?.length
		},
		// 活动场馆
		handleCheckAllChangeCg(val) {
			const arr = []
			for (let i = 0; i < this.citiesCg?.length; i++) {
				const item = this.citiesCg[i]
				arr.push(item.venueCode)
			}
			this.queryData1.venue = val ? arr : []
			this.isIndeterminateCg = false
		},
		handleCheckedCitiesChangeCg(value) {
			const checkedCount = value?.length
			this.checkAllCg = checkedCount === this.citiesCg?.length
			this.isIndeterminateCg =
				checkedCount > 0 && checkedCount < this.citiesCg?.length
		},
		handleClick(tab, event) {
			this.activeName = tab.$options.propsData.name
		},
		async getMemberData() {
			try {
				this.listObject.loading = true
				const params = {
					activityId: this.queryData0.activityId,
					activityType: 3,
					pageNum: this.listObject.pageNum,
					pageSize: this.listObject.pageSize
				}
				const api = {
					'2': 'queryActivityConfigMemberAvailablePage',
					1: 'queryActivityConfigMemberPage'
				}
				const res = await this.$api[api[1]](params)
				if (res.code === 200) {
					this.listObject.pageNum = res.data?.pageNum || 1
					this.listObject.pageSize = res.data?.pageSize || 100
					this.listObject.total = res.data?.totalRecord || 0
					this.listObject.tableData = res.data?.record || []
				}
			} catch (error) {
				this.listObject.loading = false
			} finally {
				this.listObject.loading = false
			}
		},
		operateList() {
			this.listObject.title = this.$t('friendInvitation.exclusion_list')
			this.listObject.description = this.$t(
				'friendInvitation.exclusion_description'
			)
			this.listObject.visible = true
			this.listObject.pageNum = 1
			this.listObject.pageSize = 10
			this.listObject.total = 0
			this.listObject.tableData = []
			this.listObject.data = this.rowData || {}
			this.listObject.proxyName = ''
			this.getMemberData()
			this.listObject.visible = true
		},
		deleteList(val) {
			const data = {}
			data.id = val.id
			const api = {
				1: 'memberDelete',
				2: 'memberAvailableDelete'
			}
			this.$confirm(
				`<strong>${this.$t('friendInvitation.delete_or_not')}</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(async () => {
					await this.$api[api[1]](data)
					this.getMemberData()
				})
				.catch(() => {})
		},
		async handleClickAdd() {
			if (!this.listObject.proxyName) return
			try {
				const api = {
					1: 'memberAdd',
					2: 'memberAvailableAdd'
				}
				const data = {
					activityId: this.queryData0.activityId,
					activityType: 3,
					merchantId: this.merchantInfoObj.id,
					proxyName: this.listObject.proxyName
				}
				await this.$api[api[1]](data)
				this.getMemberData()
			} catch (error) {
				this.getMemberData()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.box-container {
	position: relative;
	.box {
		width: 8px;
		height: 8px;
		background: rgba(0, 0, 0, 0.247);
		border-radius: 50%;
		// position: absolute;
		// top: 15px;
		// right: 0;
		margin-left: 10px;
		display: inline-block;
	}
	// .b1 {
	// 	left: 65px;
	// }
	// .b2 {
	// 	left: 165px;
	// }
	// .b3 {
	// 	left: 265px;
	// }
	// .b4 {
	// 	left: 365px;
	// }
	// .bb3 {
	// 	left: 165px;
	// }
	// .bb4 {
	// 	left: 265px;
	// }
}

.save-btn {
	// line-height: 25px;
	// margin-left: 20px;
	// display: inline-block;
	position: absolute;
	right: -80px;
	bottom: 0;
	&:hover .el-button {
		background: red;
		border: none;
	}
}
.small {
	// position: absolute;
	// top: 1;
	// left: 450px;
	// top: 8px;
}
.btn-left {
	left: 410px;
	z-index: 4;
}
.dao-template {
	display: flex;
	margin-top: 10%;
	justify-content: space-around;
	.dao-left {
		display: flex;
		flex-direction: column;
		span {
			font-size: 12px;
		}
	}
}
// 下载跟导入的按钮
.dao-ru {
	display: flex;
	.down {
		cursor: pointer;
		width: 120px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 1px solid rgba(0, 0, 0, 0.247);
		img {
			vertical-align: middle;
		}
	}
}
.basic-params {
	position: relative;
	.close {
		width: 45px;
		height: 45px;
		position: absolute;
		right: 15px;
		top: 0;
		font-size: 25px;
		cursor: pointer;
	}
}
// 自定义的tabs标签
.tabs-card {
	.tabs-card-tabHeader {
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.247);
		.tab-item {
			width: 80px;
			height: 30px;
			display: inline-block;
			line-height: 30px;
			color: #000;
			font-weight: 500;
			font-size: 14px;
			text-align: center;
			&:hover {
				cursor: pointer;
			}
			&.active {
				background: #00a7f0;
				color: #ffff;
				// animation: tabAnimate 0.5s forwards;
			}
			// @keyframes tabAnimate {
			// 	from {
			// 		-webkit-transform: translate3d(-100%, 0, 0);
			// 		transform: translate3d(-100%, 0, 0);
			// 	}

			// 	to {
			// 		-webkit-transform: translate3d(0, 0, 0);
			// 		transform: translate3d(0, 0, 0);
			// 	}
			// }
		}
	}
}

.check-box-style {
	display: flex;
}
.basic-container {
	margin-top: 20px;
	margin-left: 15px;
}
::v-deep .el-tabs__active-bar {
	height: 4px;
}
::v-deep .el-tabs__item {
	font-size: 15px;
}
//input-number 位置
::v-deep .el-form-item__content .el-input-group {
	vertical-align: baseline;
}
//
::v-deep .el-dialog__title {
	position: absolute;
	left: 12px;
	top: 12px;
}
::v-deep .el-dialog__header {
	padding: 44px 20px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.219);
}

::v-deep .dialog-footer {
	position: absolute;
	top: 15px;
	right: 12px;
}

.activity-object-type-list-header {
	display: flex;
	align-items: center;
}

.activity-object-type-list-labe {
	margin-left: 40px;
}

.activity-object-type-list-input {
	margin: 0 10px;
	max-width: 200px;
}
.activity-object-type-list-description {
	margin-left: 10px;
	color: red;
}
</style>
